<template>
  <el-aside width="300px">
    <el-divider content-position="center">组织架构</el-divider>
    <avue-tree ref="tree" :option="deptOption"
               :data="deptData"
               @node-click="deptClick"
               @save="addDept"
               @update="updateDept"
               @del="deleteDept"
    ></avue-tree>
  </el-aside>
</template>

<script>


import treeUtils from "@/utils/treeUtils";

import deptApi from "../../../api/sys/deptApi.js";
import deptOption from "../../../option/sys/deptOption";

export default {

  computed: {
    deptOption() {
      return {
        defaultExpandAll: true,
        formOption: deptOption(),
        props: {
          labelText: '机构名称',
          label: 'deptName',
          value: 'id',
          children: 'children'
        }
      }
    }
  },
  data() {
    return {
      deptData: [],
    }
  },
  created() {
    this.loadDept();
  },
  methods: {
    loadDept() {
      deptApi.getAllDept().then(res => {
        this.deptData = treeUtils.listToTree(res.data.data);
      })
    },
    beforeLoadDataSource() {
      if (!this.searchParams.deptId) {
        this.searchParams.deptId = -1;
      }
    },
    addDept(node, data, done, loading) {
      deptApi.add(data).then(res => {
        done();
        this.loadDept();
      })
    },
    updateDept(node, data, done, loading) {
      data.children = null;
      deptApi.updateById(data).then(res => {
        done();
      })
    },
    deleteDept(node, done) {
      deptApi.deleteById(node.id).then(res => {
        done()
      })
    },
    clearCurrentKey() {
      this.$refs.tree.setCurrentKey(null)
    },
    deptClick(data) {
      this.$emit("clickTreeNode", data);
    }
  }
}
</script>

<style scoped>

</style>
